<template>
  <Panel title="对讲列表" width="380px">
    <div class="scroll-view">
      <div class="contacts">
        <div class="contacts-item" v-for="item in contacts">
          <div class="user">
            <img class="avatar" src="/images/avatar.png" />
            <div class="content">
              <div class="title">{{ item.name }}</div>
              <div class="subtitle">{{ item.area }}</div>
            </div>
          </div>
          <div class="status">({{ item.status }})</div>
        </div>
      </div>
    </div>
    <div class="tools"><button class="primary"><Icon name="map-filling" :size="18"></Icon> 创建会话</button></div>
  </Panel>
</template>

<script lang="ts" setup>
function rowClass(target) {
  switch (target.row.status) {
    case "正常":
      return "row-success";
    case "报警":
      return "row-danger";
    case "故障":
      return "row-warning";
    default:
      return "row-info";
  }
}
const contacts = ref([
  { id: "1", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "在线" },
  { id: "2", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "在线" },
  { id: "3", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "通话中" },
  { id: "4", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "在线" },
  { id: "5", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "在线" },
  { id: "5", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "离线" },
  { id: "5", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "离线" },
  { id: "5", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "离线" },
  { id: "5", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "离线" },
  { id: "5", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "离线" },
  { id: "5", img: "img", name: "张三", code: "A00101", area: "1楼A区机房", status: "离线" },
]);

onMounted(() => {});
</script>
<style lang="scss" scoped>
.scroll-view {
  margin: 16px 0px;
  height: 320px;
  padding: 8px 0px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #2F80ED;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: rgba(37, 96, 255, 0.31);
  }
}
.contacts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;

  .contacts-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
    align-items: center;
    width: 47%;
    color: #fff;
    padding: 6px;
    background: linear-gradient(90deg, rgba(37, 96, 255, 0.5) 0%, rgba(37, 96, 255, 0) 99%);
    box-shadow: 0px 0px 8px 0px rgba(101, 227, 255, 0.5);
    .user {
      display: flex;
      flex-direction: row;
      gap: 6px;
    }
    .content {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .title {
      font-size: 16px;
      font-family: YouSheBiaoTiHei;
    }
    .subtitle {
      color: #41dbfd;
      font-size: 12px;
    }

    .status {
      font-size: 12px;
    }
  }
}

.tools{

    .primary{
        border-radius: 24px;
        color: #fff;
        width: 100%;
        padding: 6px 0px;
        background-color: var(--primary-color);
        border: 1px solid #41DBFD;
        box-shadow: 0px 4px 4px 0px #2F80ED;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
}
</style>
